﻿<template>
    <div>
        <el-button type="success" size="mini" id="printBtn" v-print="'#printMe'"><i class="el-icon-printer"></i>打印</el-button>
        <form class="wrapper"  id="printMe"   >
            <div class="header">
                <img src="../../../../public/image/logo.jpg" />
                <label>固基行远，协晨悟通</label>
            </div>
            <h2 class="Title">固远晨通科技发展有限公司员工薪酬确认单</h2>
            <table class="report_audit" rules=all>
                <tbody>
                    <tr>
                        <td class="tdCenter">姓名</td>
                        <td class="tdCenter">{{dataDB.UserName}}</td>
                        <td class="tdCenter">部门</td>
                        <td class="tdCenter">{{dataDB.Department}}</td>
                        <td class="tdCenter">岗位</td>
                        <td class="tdCenter">{{dataDB.Post}}</td>
                    </tr>
                    <tr>
                        <td class="tdCenter">职务</td>
                        <td class="tdCenter">{{dataDB.UserPosition}}</td>
                        <td class="tdCenter">等级</td>
                        <td class="tdCenter">{{dataDB.PostLevel}}</td>
                        <td class="tdCenter">入职时间</td>
                        <td class="tdCenter">{{dataDB.InductionTime}}</td>
                    </tr>
                    <tr>
                        <td class="tdCenter">试用时间</td>
                        <td class="tdCenter" colspan="5">总计{{dataDB.Month}}月，自{{dataDB.InductionTime}}至{{dataDB.RegularDate}}</td>
                    </tr>
                    <tr>
                        <td class="tdCenter">薪资待遇</td>
                        <td class="tdCenter" colspan="5">工资总额{{dataDB.TotalWage}}点(税前/月)</td>
                    </tr>
                    <tr>
                        <td>基本工资单元(单位/点)</td>
                        <td class="tdCenter" colspan="2">{{dataDB.BaseWage}}</td>
                        <td>年功工资单元(单位/点)</td>
                        <td class="tdCenter" colspan="2">{{dataDB.SeniorityWage}}</td>
                    </tr>
                    <tr>
                        <td class="tdCenter" colspan="6">岗点工资单元(单位/点)</td>
                    </tr>
                    <tr>
                        <td class="tdCenter">岗位责任</td>
                        <td class="tdCenter">岗位技能</td>
                        <td class="tdCenter">岗位劳动条件</td>
                        <td class="tdCenter">岗位劳动强度</td>
                        <td class="tdCenter">岗位脑力强度</td>
                        <td class="tdCenter">学历</td>

                    </tr>
                    <tr>
                        <td class="tdCenter">{{dataDB.PositionWage}}</td>
                        <td class="tdCenter">{{dataDB.PositionSkillWage}}</td>
                        <td class="tdCenter">{{dataDB.PostLaborConditions}}</td>
                        <td class="tdCenter">{{dataDB.PostLaborIntensity}}</td>
                        <td class="tdCenter">{{dataDB.PostMentalStrength}}</td>
                        <td class="tdCenter">{{dataDB.Education}}</td>
                    </tr>
                    <tr>
                        <td class="tdCenter">合计</td>
                        <td class="tdCenter" colspan="5">{{dataDB.PositionTotalWage}}</td>
                    </tr>
                    <tr>
                        <td class="tdCenter" colspan="6">效益工资单元(单位/点)</td>
                    </tr>
                    <tr>
                        <td class="tdCenter">社保补助</td>
                        <td class="tdCenter">加班</td>
                        <td class="tdCenter">出差</td>
                        <td class="tdCenter">奖金</td>
                        <td class="tdCenter">有效证书</td>
                        <td class="tdCenter">餐补</td>
                    </tr>
                    <tr>
                        <td class="tdCenter">{{dataDB.SocialSecuritySubsidy}}</td>
                        <td class="tdCenter">{{dataDB.WorkOvertimeWage}}</td>
                        <td class="tdCenter">{{dataDB.BusinessTravelWage}}</td>
                        <td class="tdCenter">{{dataDB.BonusWage}}</td>
                        <td class="tdCenter">{{dataDB.CertificateWage}}</td>
                        <td class="tdCenter">{{dataDB.MealTonic}}</td>
                    </tr>
                    <tr>
                        <td class="tdCenter">其它</td>
                        <td class="tdCenter" colspan="2">{{dataDB.OtherWage}}</td>
                        <td class="tdCenter">合计</td>
                        <td class="tdCenter" colspan="2">{{dataDB.BenefitTotalWage}}</td>
                    </tr>
                    <tr>
                        <td>试用期薪资</td>
                        <td colspan="5">试用期按转正薪资的80%进行发放，效益工资单元除外</td>
                    </tr>
                    <tr>
                        <td>薪资待遇核准说明</td>
                        <td colspan="5"><p style="text-indent:2em">{{dataDB.PersonalProfile}}</p></td>
                    </tr>
                    <tr>
                        <td>待遇说明</td>
                        <td colspan="5">公司将在您的月工资中按国家规定代扣出您个人所得税的个人缴纳部分及其它国家规定的有关保险等费用</td>
                    </tr>
                    <tr>
                        <td class="tdCenter" colspan="6">以上信息由人事填写</td>
                    </tr>
                    <tr>
                        <td>填表人</td>
                        <td colspan="2"></td>
                        <td>填表日期</td>
                        <td colspan="2"></td>
                    </tr>
                    <tr>
                        <td>运营副总意见</td>
                        <td colspan="2"></td>
                        <td>总经理意见</td>
                        <td colspan="2"></td>
                    </tr>
                    <tr>
                        <td class="tdCenter" colspan="6">以下信息由员工自行填写</td>
                    </tr>
                    <tr>
                        <td>身份证号码</td>
                        <td colspan="2">{{dataDB.Card}}</td>
                        <td>户名</td>
                        <td colspan="2">{{dataDB.UserName}}</td>
                    </tr>
                    <tr>
                        <td>银行卡号</td>
                        <td colspan="2">{{dataDB.BankCardNumber}}</td>
                        <td>开户行信息</td>
                        <td colspan="2">{{dataDB.BankName}}</td>
                    </tr>
                    <tr>
                        <td colspan="6">
                            <div>
                                <p style="text-indent:2em;">
                                    以上信息本人已知晓，身份证号码、银行卡信息由本人填写，并准确无误，因自己信息填写错误造成的损失由本人自行承担。同时本人承诺对自己的薪资绝对保密，如自己泄露愿意接受公司的一切处理直至解除劳动合同给予开除。
                                </p>
                                <p style="text-align:right;padding-right:150px;">员工签字：</p>
                                <p style="text-align:right;padding-right:150px;">确认日期：</p>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>备注说明</td>
                        <td colspan="5">本表仅供人事与员工确认薪资信息用，经公司审批通过后员工签字确认后作为工资发放的依据。</td>
                    </tr>
                </tbody>
            </table>
            <div class="author"><span>固远晨通科技发展有限公司制</span></div>
            <div id="Footer">
                <div><span style="margin-right: 100px;">固远晨通科技发展有限公司</span><span>网址：<a>www.guyuanct.com</a></span></div>
                <div><span>地址：成都西区大道199号成都模具工业园C1栋</span></div>
            </div>
        </form>
    </div>

</template>

<script>
    export default {
        name: "SalaryStructureReport",
        props: {
            datavalue: {
                type: Object,
                required: true
            },
            AllUsers: {
                type: Array,
                required: true
            },
            AllDepartment: {
                type: Array,
                required: true
            },
            AllPostion: {
                type: Array,
                required: true
            },
        },
        data() {
            return {
                dataDB: {
                    UserName: '',
                    Department: '',
                    Post: '',
                    UserPosition: '',
                    PostLevel: '',
                    InductionTime: "",
                    Month: '',
                    RegularDate: '',
                    TotalWage: '',
                    BaseWage: "",
                    SeniorityWage: "",
                    PositionWage: "",
                    PositionSkillWage: "",
                    PostLaborConditions: "",
                    PostLaborIntensity: "",
                    PostMentalStrength: "",
                    PositionTotalWage: "",
                    SocialSecuritySubsidy: "",
                    WorkOvertimeWage: "",
                    BusinessTravelWage: "",
                    BonusWage: "",
                    CertificateWage: "",
                    MealTonic: "",
                    Education: "",
                    OtherWage: "",
                    BenefitTotalWage: '',
                    PersonalProfile: '',
                    Card: '',
                    BankCardNumber: '',
                    BankName: '',
                },
            }
        },
        created() {
            this.InitData();
            console.log(this.AllDepartment);

        },
        methods: {
            InitData() {
                console.log(this.AllDepartment);
                console.log(this.AllPostion);
                let value = this.datavalue;
                var user = this.AllUsers.find(x => x.Id == value.UserId);
                console.log(user);
                this.dataDB.BaseWage = value.BaseWage;
                this.dataDB.SeniorityWage = value.SeniorityWage;
                this.dataDB.PositionWage = value.PositionWage;
                this.dataDB.PositionSkillWage = value.PositionSkillWage;
                this.dataDB.PostLaborConditions = value.PostLaborConditions;
                this.dataDB.PostLaborIntensity = value.PostLaborIntensity;
                this.dataDB.PostMentalStrength = value.PostMentalStrength;
                this.dataDB.PositionTotalWage = PositionTotalWage;
                this.dataDB.SocialSecuritySubsidy = value.SocialSecuritySubsidy;
                this.dataDB.WorkOvertimeWage = value.WorkOvertimeWage;
                this.dataDB.BusinessTravelWage = value.BusinessTravelWage;
                this.dataDB.BonusWage = value.BonusWage;
                this.dataDB.CertificateWage = value.CertificateWage;
                this.dataDB.MealTonic = value.MealTonic;
                this.dataDB.Education = value.Education;
                this.dataDB.OtherWage = value.OtherWage;



                this.dataDB.PersonalProfile = user.PersonalProfile;
                this.dataDB.Card = user.Card;
                this.dataDB.BankCardNumber = user.BankCardNumber;
                this.dataDB.BankName = user.BankName;
                this.dataDB.UserName = user.UserName;
                this.dataDB.Post = user.Post;
                this.dataDB.PostLevel = user.PostLevel;


                this.dataDB.Department = this.AllDepartment.find(x => x.Id == user.DepartmentId).DepartmentName;
                this.dataDB.UserPosition = this.AllPostion.find(x => x.Id == user.UserPosition).DutyName;
                let TotalWage = 0;
                let PositionTotalWage = 0;
                let BenefitTotalWage = 0;
                this.dataDB.PositionTotalWage = value.PositionWage + value.PositionSkillWage + value.PostLaborConditions + value.PostLaborIntensity + value.PostMentalStrength + value.Education;
                this.dataDB.BenefitTotalWage = value.SocialSecuritySubsidy + value.WorkOvertimeWage + value.BusinessTravelWage + value.BonusWage + value.CertificateWage + value.MealTonic + value.OtherWage;
                this.dataDB.TotalWage = value.BaseWage + value.SeniorityWage + PositionTotalWage + BenefitTotalWage;
                // var InductionTime, RegularDate;
                this.dataDB.InductionTime = this.fmtNormalDate(user.InductionTime);
                this.dataDB.RegularDate = this.fmtNormalDate(user.RegularDate);
                var InductionTimeDate = new Date(this.dataDB.InductionTime);
                var RegularDateDate = new Date(this.dataDB.RegularDate);
                this.dataDB.Month = (RegularDateDate.getFullYear() - InductionTimeDate.getFullYear()) * 12 + (RegularDateDate.getMonth() - InductionTimeDate.getMonth());
            },
            //转换正常时间为年月日
            fmtNormalDate(obj) {
                var result = "";
                if (obj != null && obj != undefined && obj != "") {
                    result = obj.split(" ")[0];
                }
                return result;
            },
        }
    }
</script>

<style scoped>
    body {
        width: 100%;
        height: 100%;
        margin: 0px;
        font-size: 14px;
        letter-spacing: 2px;
    }

    #printBtn {
        position: absolute;
        right: 10%;
        top: 50px;
        z-index: 9999;
    }

    #audit {
        position: absolute;
        right: 10%;
        top: 10px;
        z-index: 9999;
    }

    #export {
        position: absolute;
        right: 10%;
        top: 90px;
        z-index: 9999;
    }
    /*外包装样式*/
    .wrapper {
        width: 80%;
        height: 100%;
        margin: auto;
    }
    /*页眉样式*/
    .header {
        font-weight: bold;
        font-size: 20px;
        font-family: cursive;
        width: 80%;
        margin: auto;
        border-bottom: 2px solid black;
        padding: 10px 0px;
        position: relative;
    }

        .header img {
            width: 200px;
            height: 55px;
        }

        .header label {
            position: absolute;
            bottom: 10px;
            right: 70px;
        }
    /*标题样式*/
    h2 {
        width: 80%;
        text-align: center;
        font-size: 25px;
        font-weight: bold;
        margin: auto;
        padding: 10px 0;
    }
    /*标题样式*/
    h4 {
        width: 80%;
        text-align: center;
        font-weight: bold;
        margin: auto;
        padding: 10px 0;
    }
    /*数据表格样式*/
    .report_data {
        width: 100%;
        text-align: center;
        border: 1px solid black;
        font-size: 14px;
        word-break: break-all;
    }

        .report_data tr {
            height: 40px;
        }

        .report_data th {
            font-weight: 100;
        }

    .baseInfo {
        height: 20px;
        line-height: 20px;
        border: 1px solid black;
        border-bottom: 0px;
        padding: 8px;
    }

        .baseInfo .worderWrapper {
            display: inline-block;
            width: 200px;
        }

    .style {
        height: 40px;
        line-height: 40px;
        border: 1px solid black;
        border-bottom: 0px;
        padding: 8px;
    }

    .price {
        border-top: none;
    }
    /*审核表格样式*/
    .report_audit {
        width: 100%;
        border: 1px solid black;
        font-size: 14px;
    }

        .report_audit .tdCenter {
            text-align: center;
        }

        .report_audit tr {
            height: 70px;
        }

            .report_audit tr p {
                padding: 3px;
            }

        .report_audit td {
            padding: 0 10px;
        }

            .report_audit td:first-child {
                width: 150px;
            }

        .report_audit .tr_center {
            text-align: center;
        }

    tr p.audit {
        font: italic bold 20px/30px arial,sans-serif;
        text-align: right;
        /*padding-right: 110px;*/
    }

        tr p.audit span {
            display: inline-block;
            width: 100px;
            font: bold 17px/30px arial,sans-serif;
        }

    tr p.gray {
        color: gray;
    }

    tr p.audit span.red {
        color: red;
    }

    tr p.audit span.blue {
        color: blue;
    }

    .time {
        width: 100%;
        text-align: right;
    }

    .author {
        width: 80%;
        margin: auto;
        margin-top: 5px;
        font-weight: bold;
        text-align: right;
    }
    /*页脚样式*/
    #Footer {
        width: 80%;
        margin: auto;
        border-top: 2px solid black;
        margin-top: 60px;
        font-weight: bold;
    }

        #Footer div {
            padding-top: 5px;
            padding-bottom: 10px;
        }
    /*设置搜索框居中*/
    #search {
        text-align: center;
        padding: 0px;
    }

        #search select {
            text-align: left;
        }
    /*折叠面板样式修改*/
    .layui-collapse .layui-colla-title {
        margin: 0;
        width: 100%;
        text-align: left;
    }

    .wrapperReport {
        width: 100%;
        height: 100%;
        margin: auto;
    }
    /*报表管理下统计报表的样式*/
    #EchartData .pie {
        height: 500px;
    }

    #EchartData .pieData {
        float: left;
        width: 50%;
        height: 500px;
    }

    #EchartData .bar {
        width: 100%;
        height: 500px;
    }

    .report_data .tr_one {
        height: 50px;
    }

    .report_data .tr_two {
        height: 100px;
    }

    .report_data .td_Title {
        font-weight: bold;
    }

    .td_left {
        text-align: left;
        padding-left: 20px;
    }

    .td_Content {
    }

    .report_data .layui-disabled, .report_data .layui-disabled:hover {
        color: black !important;
    }

    .report_data .layui-form-radio > i:hover, .report_data .layui-form-radioed > i {
        color: #5FB878 !important;
    }
    img {
        width: 120px;
        height: 100px;
        margin-right: 10px;
    }

    .handle {
        position: relative;
        background-color: black;
        color: white;
        filter: alpha(Opacity=80);
        -moz-opacity: 0.5;
        opacity: 0.5;
        width: 120px;
        text-align: right;
        height: 28px;
        margin-bottom: -28px;
        display: none;
    }

        .handle span {
            margin-right: 5px;
        }

            .handle span:hover {
                cursor: pointer;
            }

        .handle .layui-icon {
            font-size: 25px;
        }

    .file-iteme {
        padding: 1px;
        float: left;
    }

    .layui-layer-photos .layui-layer-phimg img {
        height: 100%;
    }

    .layui-upload-img {
        cursor: pointer;
    }
</style>